'use client';

import {DehydratedState, HydrationBoundary, QueryClientProvider} from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import {queryClientUtils} from "@/modules/application/utils/queryClientUtils/queryClientUtils";
import {ReactNode} from "react";
import { SharedDataProvider } from '@/modules/application/sharedDataContext';

export interface IProvidersProps {
  /**
   * Dehydrated state for the react-query provider.
   */
  dehydratedState?: DehydratedState;
  /**
   * Children of the component.
   */
  children?: ReactNode;
}

export function Providers(props:IProvidersProps) {
  const queryClient = queryClientUtils.getQueryClient();
  const { dehydratedState, children } = props;

  return (
    <QueryClientProvider client={queryClient}>
      <HydrationBoundary state={dehydratedState}>
        <SharedDataProvider>
          {children}
        </SharedDataProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </HydrationBoundary>
    </QueryClientProvider>
  );
}
